<template>
	<view class="video_box">
		<video ref="ad" :id="index" :src="videoUrl" controls @play="startPlay()" @pause="pausePlay()" @ended="endedPlay()"></video>
		<!-- 欢迎弹框 -->
		<uni-popup ref="popupWelcome" :custom="true" :maskClick="false">
			<view class="popup_box_de">
				<!-- <image class="popup_box_close" :src="clearPng" @click="popupClose"></image> -->
				<view class="popup_box_content">
					<view class="popup_box_img">
						<image :src="gift_new_img" style="width: 68upx;height: 68upx;"></image>
						<view style="margin-left: 18upx;">盘古</view>
					</view>
					<view class="popup_box_welcome">
						<view></view>
						<view>
							<text>
							<text style="color: #FFE500;align-self: flex-start;" v-if="nickName">{{nickName}}</text>
							<text style="color: #FFE500;align-self: flex-start;" v-else>你好</text>，{{homeInfo.news.welcome_message}}
							</text>
						</view>
					</view>
					<view class="popup_box_prepare">
						<view class="popup_box_contain">
							<view class="popup_box_prepare_title">
								点亮学习，特意为你准备了
							</view>
							<view class="popup_box_prepare_gift">
								<view>
									<image class="popup_box_image" :src="crown"></image>
									<text class="popup_box_prepare-num">{{homeInfo.news.achievement_value}}</text>
									<text class="popup_box_prepare-think">成就值</text>
								</view>
								<view>
									<image class="popup_box_image" :src="gift_kindling"></image>
									<text class="popup_box_prepare-num" style="font-size:28upx;text-align:center;">{{homeInfo.news.grade}}</text>
									<text class="popup_box_prepare-think">火种</text>
								</view>
								<view>
									<image class="popup_box_image" :src="gift_money"></image>
									<text class="popup_box_prepare-num">{{homeInfo.news.red_envelope}}</text>
									<text class="popup_box_prepare-think">现金红包</text>
								</view>
							</view>
						</view>
					</view>
					<button class="popup_box_prepare_receive" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getuserinfo">
						领取福利
					</button>
					<view class="xieyi" @click="toMember">
						领取福利就代表同意<text style="color: #00A66A;">《用户协议》</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		userLogin
	} from '@/common/login.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				clearPng: this.$imgUrl + 'img/clear.png',
				gift_new_img: this.$imgUrl + 'img/gift_new_img.png',
				crown: this.$imgUrl + 'img/crown.png',
				gift_kindling: this.$imgUrl + 'img/gift_kindling.png',
				gift_money: this.$imgUrl + 'img/gift_money.png',
				// 视频id
				id: 0,
				// 分享人的token
				token: '',
				// 分享人的id
				user_id: '',
				videoUrl: '',
				video: null,
				index: 0,
				share_id: 0,
				recordId: 0,
				videoInfo: {
					title: ''
				},
				homeInfo: {
					news: {
						welcome_message: '',
						achievement_value: 0,
						red_envelope: 0,
						grade: 0
					}
				},
			}
		},
		components: {
			uniPopup
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			this.videoUrl = options.videoUrl
			// this.video= uni.createVideoContext(String(this.index))
			// this.video.play()
			this.id = data.id
			this.user_id = data.user_id
			this.token = data.token
			this.share_id = data.share_id
			this.fromJin = options.fromJin
			this.getShareId()
			console.log('视频分享的链接进来',JSON.parse(options.data),'视频路径',this.videoUrl)
			this.$store.commit('updataFromJin',this.fromJin)
			this.$store.commit('updataShareId',this.user_id)
			this.getHomeInfo()
		},
		onUnload () {
			if(this.video!=null) {
				this.video.pause()
				this.video = null
			}
		},
		methods: {
			toMember(){
				uni.navigateTo({
					url:'../../memberCenter/menberJurisdiction/menberJurisdiction?page=jurisdictionExplain'
				})
			},
			// 获取首页用户基本信息
			getHomeInfo() {
				let self = this
				let data = {
					user_id: self.$store.getters.getUserId
				}
				this.$api.getHomeBase(data).then(res => {
					if (res.status) {
						this.homeInfo = res.data
						if(this.$store.getters.getToken) {
							this.video= uni.createVideoContext(String(this.index))
							this.video.play()
						}else {
							this.$refs.popupWelcome.open()
						}
					}
					console.log('获取首页用户基本信息', res)
				}).catch(err => {
					console.log('获取首页用户基本信息', err)
				})
			},
			popupClose() {
				this.$refs.popupWelcome.close()
				this.video= uni.createVideoContext(String(this.index))
				this.video.play()
			},
			getuserinfo() {
				userLogin(this.user_id,this.fromJin)
				setTimeout(() => {
					this.popupClose()
					try {
						const res = uni.getStorageSync('userInfo');
						if (res) {
							this.nickName = res.nickName
							this.avatarUrl = res.avatarUrl
						}
					} catch (e) {
						this.nickName = this.$store.state.nickName
						this.avatarUrl = this.$store.state.avatarUrl
					}
				}, 2000)
			},
			// 拿到分享记录id
			getShareId() {
				let data = {
					token: this.token,
					user_id: this.user_id,
					video_id: this.id,
					share_id: this.share_id,
					isNoNeedLoading: true
				}
				this.$api.add_share_video_record(data).then(res => {
					console.log('分享视频记录',res)
				}).catch(err => {
					console.log('分享视频记录',err)
				})
			},
			startPlay() {
				let data = {
					token: this.$store.getters.getToken,
					user_id: this.$store.getters.getUserId,
					video_id: this.id,
					is_finish: 2,
					share_id: this.share_id,
					isNoNeedLoading: true
				}
				this.$api.add_watch_record(data).then(res => {
					if(res.status) {
						this.recordId = res.res
					}
					console.log('添加视频观看记录',res)
				}).catch(err => {
					console.log('添加视频观看记录',err)
				})
				this.$api.add_watch_record().then().catch()
				console.log('开始播放')
			},
			pausePlay() {
				console.log('暂停播放')
			},
			endedPlay() {
				let data = {
					token: this.$store.getters.getToken,
					id: this.recordId,
					is_finish: 1,
					isNoNeedLoading: true
				}
				this.$api.update_watch_record(data).then(res => {
					console.log('编辑视频观看记录',res)
				}).catch(err => {
					console.log('编辑视频观看记录',err)
				})
				console.log('结束播放')
			}
		}
	}
</script>

<style>
	.xieyi {
		color: #AAA;
		font-size: 28upx;
		text-align: center;
	}
	.video_box {
		width: 100%;
		height: 100%;
		position: fixed;
	}
	.video_box>video {
		width: 100%;
		height: 100%;
	}
	/* 弹框样式 */
	.popup_box_de {
		height: 962upx;
		width: 590upx;
		position: relative;
		color: #fff;
	}
	
	.popup_box_de .popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.popup_box_de .popup_box_content {
		width: 590upx;
		height: 950upx;
		position: absolute;
		top: 62upx;
		left: 0;
		background: url('https://lightplanet.tuanhaoke.cn/img/new_person_bg.png');
		background-size: 100% 100%;
	}
	
	.popup_box_content .popup_box_img {
		display: flex;
		line-height: 68upx;
		font-size: 30upx;
		margin-left: 34upx;
		margin-top: 34upx;
	}
	
	.popup_box_content .popup_box_welcome {
		width: 518upx;
		height: 100upx;
		margin-top: 8upx;
		margin-left: 34upx;
	}
	
	.popup_box_content .popup_box_welcome>view:first-child {
		border-color: transparent transparent rgba(67, 67, 67, 0.32) transparent;
		border-style: solid;
		border-top: transparent;
		border-width: 8px;
		font-size: 0;
		height: 0px;
		line-height: 0;
		width: 0px;
		margin-left: 48px;
	}
	
	.popup_box_content .popup_box_welcome>view:last-child {
		height: 80upx;
		background: rgba(67, 67, 67, 0.32);
		color: #fff;
		font-size: 24upx;
		padding: 8upx 26upx;
		box-sizing: border-box;
		border-radius: 20upx;
		line-height: 34upx;
		display: flex;
		word-break: break-all;
		align-items: center;
	}
	
	.popup_box_content .popup_box_prepare {
		width: 564upx;
		height: 440upx;
		background-size: 50% 50%;
		margin-top: 12upx;
		background: url('https://lightplanet.tuanhaoke.cn/img/gift_decorate.png') no-repeat;
		padding-top: 10upx;
		padding-left: 28upx;
		box-sizing: border-box;
	}
	
	.popup_box_prepare .popup_box_contain {
		width: 100%;
		height: 570upx;
	}
	
	.popup_box_contain .popup_box_prepare_title {
		line-height: 52upx;
		color: #00A66A;
		font-size: 38upx;
		margin-top: 68upx;
		text-align: center;
		font-weight: 550;
	}
	
	.popup_box_contain .popup_box_prepare_gift {
		display: flex;
		justify-content: space-around;
		margin-top: 66upx;
	}
	
	.popup_box_contain .popup_box_prepare_gift .popup_box_image {
		width: 100upx;
		height: 100upx;
	}
	
	.popup_box_contain .popup_box_prepare_gift text {
		display: block;
		text-align: center;
	}
	
	.popup_box_prepare_gift .popup_box_prepare-num {
		color: #FF5C46;
		font-size: 36upx;
		line-height: 50upx;
	}
	
	.popup_box_prepare_gift .popup_box_prepare-think {
		font-size: 24upx;
		color: #999999;
	}
	
	.popup_box_content .popup_box_prepare_receive {
		height: 80upx;
		width: 430upx;
		background: linear-gradient(#CBEC00, #00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0, 166, 106, 0.4);
		color: #fff;
		font-size: 30upx;
		border-radius: 40upx;
		margin: 30upx auto;
		line-height: 80upx;
		text-align: center;
		margin-top: 0;
	}
</style>
